<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            margin-left: 500px;
            border:1px solid pink;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400">您的浏览器不支持canvas画布标签</canvas>

    <script>
        var data = [
            {x:100 , y:120},
            {x:200 , y:160},
            {x:300 , y:240},
            {x:400 , y:320},
            {x:500 , y:80}
        ];
        function LineChart( ctx ){
            this.ctx = ctx || document.querySelector("canvas").getContext("2d");
            this.canvasWidth = this.ctx.canvas.width;
            this.canvasHeight = this.ctx.canvas.height;
            this.gridSize = 10;
            this.axisSpace = this.gridSize * 2;
            this.x0 = this.axisSpace;
            this.y0 = this.canvasHeight - this.axisSpace;
            this.square = 6;
        }
        LineChart.prototype.init = function( myData ){
            this.drawGird();
            this.drawAxis();
            this.drawDot( myData );
        } 
        LineChart.prototype.drawGird = function(){
            var girdXNum = this.canvasHeight / this.gridSize;
            for( var i = 1 ; i < girdXNum ; i++  ){
                this.ctx.beginPath();
                this.ctx.moveTo( 0, this.gridSize*i );
                this.ctx.lineTo( this.canvasWidth , this.gridSize*i );
                this.ctx.strokeStyle = "#ccc";
                this.ctx.stroke();
            }
            var girdYNum = this.canvasWidth / this.gridSize;
            for( var i = 1 ; i < girdYNum ; i++  ){
                this.ctx.beginPath();
                this.ctx.moveTo( this.gridSize*i , 0 );
                this.ctx.lineTo( this.gridSize*i , this.canvasHeight );
                this.ctx.strokeStyle = "#ccc";
                this.ctx.stroke();
            }
        }
        LineChart.prototype.drawAxis = function(){
            this.ctx.beginPath();
            this.ctx.moveTo( this.x0 , this.y0 );
            this.ctx.lineTo( this.canvasWidth - this.axisSpace , this.y0 );
            this.ctx.strokeStyle = "black";
            this.ctx.stroke();
            this.ctx.beginPath();
            this.ctx.moveTo( this.canvasWidth - this.axisSpace , this.y0 );
            this.ctx.lineTo( this.canvasWidth - this.gridSize*3, this.y0 + this.gridSize / 2 );
            this.ctx.lineTo( this.canvasWidth - this.gridSize*3, this.y0 - this.gridSize / 2 );
            this.ctx.fillStyle = "black";
            this.ctx.fill();
            this.ctx.beginPath();
            this.ctx.moveTo( this.x0 , this.y0 );
            this.ctx.lineTo( this.x0 , this.axisSpace );
            this.ctx.strokeStyle = "black";
            this.ctx.stroke();
            this.ctx.beginPath();
            this.ctx.moveTo( this.x0 , this.axisSpace );
            this.ctx.lineTo( this.gridSize*2 - this.gridSize/2 , this.gridSize*3 );
            this.ctx.lineTo( this.gridSize*2 + this.gridSize/2 , this.gridSize*3 );
            this.ctx.fillStyle = "black";
            this.ctx.fill();
        }
        LineChart.prototype.drawDot = function( myData ){
            var newData = myData.map( function (item){
                return {
                    x: item.x + this.axisSpace,
                    y: this.canvasHeight - this.axisSpace - item.y
                }
            }.bind( this ) );
            newData.forEach( function( item ){
                this.ctx.beginPath();
                this.ctx.fillRect( item.x - this.square/2, item.y - this.square/2, this.square, this.square );
            }.bind(this)  );
            this.ctx.beginPath();
            this.ctx.moveTo(this.x0, this.y0 );
            var self = this;
            newData.forEach( function( item ){
                self.ctx.lineTo( item.x, item.y );
            })
            this.ctx.stroke();
        }
        var linechart = new LineChart();
        linechart.init( data );
    </script>
</body>
</html>